<html>
<head>
<style type="text/css">
    video {
        border: 1px solid #333;
    }

    table, td {
        border: 1px solid #333;
        border-collapse: collapse;
    }

    thead, tfoot {
        background-color: #333333;
        color: #ffffff;
    }
</style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th colspan="2">Metadata</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Current Source</td>
                <td id=src>null</td>
            </tr>
            <tr>
                <td>Is Selected</td>
                <td id=selected>false</td>
            </tr>
        </tbody>
    </table>

    <br />

    <video id=video controls>
        <source>
        <source src="">
        <source src="Yo I don't exist!">
        <source src="../../../home/anon/Videos/test-webm.webm">
    </video>

    <script type="text/javascript">
        let video = document.getElementById('video');

        video.videoTracks.onaddtrack = (event) => {
            document.getElementById('selected').textContent = event.track.selected;
        };

        video.addEventListener('loadedmetadata', () => {
            document.getElementById('src').textContent = video.currentSrc;
        });
    </script>
</body>
</html>
